<template>
  <view class="container">
    <view>
      <!-- Tabs Section -->
      <up-tabs
              class="up-tabs-content"
              :list="carsDataDetails"
              @click="onTabClick"
              :lineWidth="lineWidth"
              lineColor="#2877FF"
              :activeStyle="activeTabStyle"
              :inactiveStyle="inactiveTabStyle"
              itemStyle="padding-left: 15px; padding-right: 15px; height: 50px;"
      />

      <!-- Tab Content -->
      <view v-if="activeTab === 'item1'">
        <!--                <web-view src="http://58.48.93.37/wsyg/complain/notice"></web-view>-->
      </view>
      <view v-if="activeTab === 'item2'">
      </view>
      <view v-if="activeTab === 'item3'">
      </view>
      <view v-if="activeTab === 'item4'">
      </view>
    </view>
  </view>
</template>

<script>

  export default {
    data() {
      return {
        carsDataDetails: [
          {name: "省级考核", id: "item1"},
          {name: "市级考核", id: "item2"},
          {name: "企业考核", id: "item3"},
          {name: "运营商考核", id: "item4"},
        ],
        activeTab: "item1", // 默认显示车辆信息
      };
    },
    computed: {
      lineWidth() {
        return this.calculateTextWidth(this.activeTab);
      },
      activeTabStyle() {
        return {
          color: "#2877FF",
          fontWeight: "bold",
          transform: "scale(1.05)",
        };
      },
      inactiveTabStyle() {
        return {
          color: "#606266",
          transform: "scale(1)",
        };
      },
    },
    methods: {
      calculateTextWidth(text) {
        const canvas = document.createElement("canvas");
        const context = canvas.getContext("2d");
        context.font = "16px Arial";
        return context.measureText(text).width;
      },
      onTabClick(tab) {
        console.log("Tab clicked:", tab);
        if (tab && tab.index >= 0 && tab.index < this.carsDataDetails.length) {
          this.activeTab = this.carsDataDetails[tab.index].id;
        } else {
          console.error("Invalid tab index:", tab);
        }
      },
    }
  };
</script>

<style scoped lang="scss">
  .container {
    padding: 10px;
    background: #f3f6fa;
    height: 100vh;
  }

  //tab切换栏样式
  .up-tabs-content {
    margin-bottom: 20px;
  }

</style>
